<template>
	<view class="content">
		<div class="pos-rel" v-if="loading">

			<!-- 内容 -->
			<div class="main" :style="{ paddingTop: 2 * navTop + custom.height + custom.top + 10 + 'px' }">

				<div v-for="(item, index) in list" :key="index" class="item mb-16 flex-center" @click="expand(item)">

					<div>
						<div class="fontS28 font-500 olor-0d lh-50 ">{{ item.legLecTitle }}</div>
						<div class="fontS26 mt-12 color-6d lh-40 text-justify" :class="item.expand ? '' : 'fontE3'">
							<rich-text :nodes="item.legLecContent"></rich-text>
						</div>
					</div>

				</div>
				<without v-if="!listLoad"></without>
			</div>
		</div>
	</view>
</template>

<script>
const App = getApp().globalData;
import {
	findLegalLectureListApp,
} from "@/api/index";

export default {
	data() {
		return {
			params: {
				pageNum: 1,
				pageSize: 10
			},
			list: [],
			page: '',
			loading: false,
			noteFlag: true,
			listLoad: true

		};
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo;
		},
	},
	onReachBottom() {
		this.params.pageNo++;
		if (this.noteFlag) {
			this.getList();
		}
	},
	async onLoad(option) {
		await this.getList()
	},


	methods: {
		// 行业分类
		async getList() {
			const {
				rows
			} = await findLegalLectureListApp(this.params);
			this.loading = true
			if (rows.length > 0) {
				rows.forEach(item => {
					item.expand = false
					item.legLecContent = item.legLecContent.replace(/\n/g, '<br/>')
				})
			}
			if (rows.length < this.params.pageSize) this.noteFlag = false
			this.list = [...this.list, ...rows]
			if (this.list.length < 1) this.listLoad = false

		},
		async expand(item) {
			this.list.forEach(items => {
				if (item.legLecId == items.legLecId) {
					item.expand = !item.expand
				} else {
					items.expand = false
				}

			})
		},


	},
};
</script>

<style lang="less" scoped>
page {
	background-color: #f7f7f7 !important;
}

.content {
	height: 100vh;
	overflow-y: auto;


}

.main {
	padding: 30upx;
}

.item {

	background: #fff;
	border-radius: 4px;
	padding: 24upx 30upx;

	.icon {
		min-width: 104upx;
		background: #39B575;
		height: 104upx;
		border-radius: 50%;


	}



}

.slectItem {
	padding: 6px 8px;
	background: #E9F8F0;
	color: #37AF71;
}
</style>